<template>
    <el-row class="student-information">
        <el-col :span="12" class="student-information-card">
            <el-card class="box" shadow="hover">
                <div slot="header" >
                    <span>系统账号信息</span>
                    <el-button style="float: right; padding: 3px 0" type="text" @click="userFormVisible = true">修改系统账号信息</el-button>
                    <el-dialog title="修改用户系统信息" :visible.sync="userFormVisible"  style="width: 60%;margin-left: 20%">
                        <el-form :model="changeUserForm">
                            <el-form-item label="要修改的类型" >
                                <el-select v-model="changeUserForm.type" placeholder="请选择修改的类型">
                                    <el-option label="密码" value="user_password"></el-option>
                                    <el-option label="邮箱" value="user_email"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="修改内容">
                                <el-input v-model="changeUserForm.input" autocomplete="off"></el-input>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="userFormVisible = false">取 消</el-button>
                            <el-button type="primary" @click="changeUser">确 定</el-button>
                        </div>
                    </el-dialog>
                </div>
                <el-row>
                    <el-col :span="12"><div>登录账号</div></el-col>
                    <el-col :span="12"><div>{{this.$store.state.user.user_id}}</div></el-col>
                </el-row>
                <el-row style="margin-top: 20px">
                    <el-col :span="12"><div>密码</div></el-col>
                    <el-col :span="12" ><div>您的密码在存储过程中已加密,请放心~~~</div></el-col>
                </el-row>
                <el-row style="margin-top: 20px">
                    <el-col :span="12"><div>邮箱</div></el-col>
                    <el-col :span="12" ><div>{{this.$store.state.user.user_email}}</div></el-col>
                </el-row>
                <el-row style="margin-top: 20px">
                    <el-col :span="12"><div>角色</div></el-col>
                    <el-col :span="12" ><div>学生</div></el-col>
                </el-row>
                <el-row style="margin-top: 30px;text-align: center;"><div>您可以在右上角点击"修改信息",即可修改您的密码和邮箱~~~</div></el-row>
            </el-card>
        </el-col>
        <el-col :span="12" class="student-information-user">
            <el-card class="box" shadow="hover">
                <div slot="header" >
                    <span>借阅证信息</span>
                    <el-button style="float: right; padding: 3px 0" type="text" @click="cardFormVisible = true">修改借阅证信息</el-button>
                    <el-dialog title="修改借阅证信息" :visible.sync="cardFormVisible"  style="width: 60%;margin-left: 20%">
                    <el-form :model="changeCardForm">
                        <el-form-item label="要修改的类型" >
                            <el-select v-model="changeCardForm.type" placeholder="请选择修改的类型">
                                <el-option label="院系" value="student_department"></el-option>
                                <el-option label="专业" value="student_major"></el-option>
                                <el-option label="联系电话" value="student_phone"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="修改内容">
                            <el-input v-model="changeCardForm.input" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="cardFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="changeCard">确 定</el-button>
                    </div>
                </el-dialog>
                </div>
                <el-row>
                    <el-col :span="12"><div>借书证编号</div></el-col>
                    <el-col :span="12"><div>{{this.$store.state.card.library_card_id}}</div></el-col>
                </el-row>
                <el-row style="margin-top: 20px">
                    <el-col :span="12"><div>学生姓名</div></el-col>
                    <el-col :span="12" ><div>{{this.$store.state.card.student_name}}</div></el-col>
                </el-row>
                <el-row style="margin-top: 20px">
                    <el-col :span="12"><div>系别</div></el-col>
                    <el-col :span="12" ><div>{{this.$store.state.card.student_department}}</div></el-col>
                </el-row>
                <el-row style="margin-top: 20px">
                    <el-col :span="12"><div>专业</div></el-col>
                    <el-col :span="12" ><div>{{this.$store.state.card.student_major}}</div></el-col>
                </el-row>
                <el-row style="margin-top: 20px">
                    <el-col :span="12"><div>联系电话</div></el-col>
                    <el-col :span="12" ><div>{{this.$store.state.card.student_phone}}</div></el-col>
                </el-row>
                <el-row style="margin-top: 20px">
                    <el-col :span="12"><div>借阅上限</div></el-col>
                    <el-col :span="12" ><div>{{this.$store.state.card.student_limit}}</div></el-col>
                </el-row>
                <el-row style="margin-top: 20px">
                    <el-col :span="12"><div>学号(系统账号)</div></el-col>
                    <el-col :span="12" ><div>{{this.$store.state.card.student_account}}</div></el-col>
                </el-row>
                <el-row style="margin-top: 20px">
                    <el-col :span="12"><div>是否存在欠缴金额</div></el-col>
                    <el-col :span="12" ><div>{{this.$store.state.card.student_is_arrears?"存在欠缴金额":"正常"}}</div></el-col>
                </el-row>
                <el-row style="margin-top: 20px">
                    <el-col :span="12"><div>创建时间</div></el-col>
                    <el-col :span="12" ><div>{{this.$store.state.card.student_create_time}}</div></el-col>
                </el-row>
            </el-card>
        </el-col>
    </el-row>
</template>

<script>
    export default {
        name: "StudentInformation",
        data(){
          return {
              userFormVisible : false,
              cardFormVisible : false,
              changeUserForm:{
                  type:'',
                  input:''
              },
              changeCardForm:{
                  type:'',
                  input:''
              },
          }
        },
        methods:{
            changeUser (){
                this.userFormVisible = false
                console.log('发送修改用户信息请求');
                this.$axios.post('/users/update',{
                    role:this.$store.state.user.user_role,
                    user_id:this.$store.state.user.user_id,
                    type:this.changeUserForm.type,
                    input:this.changeUserForm.input
                }).then(res => {
                    this.changeUserForm.type = ''
                    this.changeUserForm.input = ''
                    if(res.data.code === 200){
                        this.$message({
                            message: '修改系统用户信息成功,重新登录后生效~~~',
                            type: 'success'
                        })
                    }else{
                        this.$message({
                            message: '服务器开小差了,请刷新重试~~~',
                            type: 'warning'
                        })
                    }
                })
            },
            changeCard (){
                this.cardFormVisible = false
                console.log('发送修改借阅证信息请求');
                this.$axios.post('/cards/update',{
                    role:this.$store.state.user.user_role,
                    id:this.$store.state.card.library_card_id,
                    type:this.changeCardForm.type,
                    input:this.changeCardForm.input
                }).then(res => {
                    this.changeCardForm.type = ''
                    this.changeCardForm.input = ''
                    if(res.data.code === 200){
                        this.$message({
                            message: '修改借阅证信息成功,重新登录后生效~~~',
                            type: 'success'
                        })
                    }else{
                        this.$message({
                            message: '服务器开小差了,请刷新重试~~~',
                            type: 'warning'
                        })
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .student-information{
        height: 100%;
    }
    .student-information-card {
        height: 100%;
    }
    .student-information-user{
        height: 100%;
    }
    .box{
        margin: 10%;
    }
    .information{
        width: 50%;
    }
</style>